<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<a href="index.html">返回</a>
<h2>props属性</h2>
<div id="app">
    //:age可以解决数据类型警告
    <s1 name="张三" :age="14"></s1>
</div>
<script>
    Vue.config.productionTip=false  //关闭生产状态提示
    const student = Vue.extend({
        // props:['name','age'],
        //可以对数据类型进行限制
        props:{
          // name:String,
            name:{
                type:String,
                required:true
            },
          // age:Number
            age:{
              type:Number,
                default:18
            }
        },
        template:`
          <div>
          <h3>学生信息</h3>
          <p>{{name}}-{{age}}</p>
          </div>
        `
    })
    new Vue({
        el:"#app",
        components :{
            s1:student
        }
    })
</script>
</body>
</html>